<template>
  <div style="width:100%">
    <div style="padding:5px;width:100%">
      <el-form :model="yfuForm" ref="yfuForm" label-width="100px" class="demo-dynamic"  >
        <el-form-item v-for="item in formParam.items" :key="item.prop"
          :prop="item.prop"
          :label="item.label" :class="item.display"
          :rules="filter_rules(item.rules)" :style="{'width':'100%','margin-top':'15px'}"
        >
          <!-- 禁用输入框-->
          <el-input v-model="yfuForm[item.prop]" size="mini" v-if="item.type=='inputDisabled'" :disabled="true"></el-input>
          <!-- 一般输入框-->
          <el-input v-model="yfuForm[item.prop]" size="mini" v-if="item.type=='input'" :disabled="item.disable == null ? false : item.disable" ></el-input>
          <!-- TEXTAREA框-->
          <el-input v-model="yfuForm[item.prop]" size="mini" v-if="item.type=='textarea'" :rows="item.rows" type="textarea"  :disabled="disabled"></el-input>
          <!-- 数字框-->
          <el-input-number v-model="yfuForm[item.prop]"  v-if="item.type=='inputnumber'"  :disabled="disabled"
                           controls-position="right" :min="item.min"
                           :max="item.max"
                           size="mini"  style="width:100%">
          </el-input-number>
          <!-- SELECT选择框静态数据-->
          <el-select v-model="yfuForm[item.prop]" filterable  placeholder="请选择" v-if="item.type=='select'" style="width:100%"   size="mini"  :disabled="disabled">
            <el-option
              v-for="option in item.options" :option="option"
              :key="option[item.valueName]"
              :label="option[item.labelName]"
              :value="option[item.valueName]">
            </el-option>
          </el-select>
          <!-- SELECT选择框远程搜索-->
          <el-select v-model="yfuForm[item.prop]" filterable  placeholder="请选择" v-if="item.type=='selectsearch'" style="width:100%"   size="mini"  :disabled="item.disable == null ? false : item.disable">
            <el-option
              v-for="option in item.options" :option="option"
              :key="option[item.valueName]"
              :label="option[item.labelName]"
              :value="option[item.valueName]">
            </el-option>
          </el-select>
          <!-- 单选框-->
          <el-radio-group v-model="yfuForm[item.prop]" v-if="item.type=='radio'"  :disabled="disabled">
            <el-radio :label="option.id" v-for="option in item.options" :key="option.id">{{option[item.labelName]}}</el-radio>
          </el-radio-group>
          <!-- 复选框-->
          <el-checkbox-group
            v-model="yfuForm[item.prop]" v-if="item.type=='checkbox'"  :disabled="disabled"
            :min="item.min"
            :max="item.max">
            <el-checkbox  v-for="option in item.options" :label="option.id" :key="option.id"  @change="refreshCheckBox(item,option.id)">{{option[item.labelName]}}</el-checkbox>
          </el-checkbox-group>
          <!--开关-->
          <el-switch v-model="yfuForm[item.prop]" v-if="item.type=='switch'"  :disabled="disabled"></el-switch>

          <!--date-->
          <el-date-picker type="date" placeholder="选择日期" v-model="yfuForm[item.prop]" v-if="item.type=='date'"  :disabled="disabled"
                          style="width: 100%;"></el-date-picker>
          <!--datetime-->
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="yfuForm[item.prop]" v-if="item.type=='datetime'"  :disabled="disabled"
                          style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-form>
    </div>
    <!--因VUE2不能检测数据的变化，所以，当checkox变化时，必须触发change事件，来生成一个随机值到input来更新-->
    <input v-model="refreshCheckBoxData" class="displayNone">
  </div>
</template>
<style>
  .buttonStyle {
    border:1px solid #4caf50
  }
  .displayNone {
    display:none
  }
</style>
<script>
  import {yfuPost, tfGet} from '@/utils/request.js'
  import global_ from '@/utils/global.vue'
  export default {
    props: ['formParam'],
    data () {
      return {
        disabled: false,
        refreshCheckBoxData: 0,
        yfuForm: {},
        url: this.formParam.url
      }
    },
    created () {
      for (let param of this.formParam.items) {
        if (param.type === 'selectsearch') {
          let uparam = {}
          if (global_.isLocalServer) {
            tfGet(param.url, function (data) {
              if (Array.isArray(data)) {
                param.options = data
              } else {
                param.options = data.datas
              }
            })
          } else {
            yfuPost(this.formParam.baseURL, param.url, uparam, function (data) {
              if (Array.isArray(data)) {
                param.options = data
              } else {
                param.options = data.datas
              }
            })
          }
          // checkbox 必须提前把值设置为[]  不然会全部选中
        } else if (param.type === 'checkbox') {
          this.yfuForm[param.prop] = []
        }
      }
    },
    methods: {
      refreshCheckBox (item, id) {
        this.refreshCheckBoxData = new Date().getTime()
      },
      assignForm (item) {
        this.yfuForm = item
      },
      clearForm () {
        // 此处有BUG，当列表有checkbox时，调用此方法只修改数据，CHECKBOX则会点击全选中
        this.yfuForm = {}
      },
      addForm () {
        this.clearForm()
        this.editForm()
      },
      editForm () {
        this.disabled = false
      },
      disabledForm () {
        this.disabled = true
      },
      modifyUrl (url) {
        this.url = url
      },
      submit () {
        let cThis = this
        this.$refs.yfuForm.validate((valid) => {
          if (valid) {
            // this.formParam.url  去post
            if (global_.isLocalServer) {
              tfGet(cThis.url, function (data) {
                cThis.$emit('saveFormSuccess', data)
              })
            } else {
              yfuPost(cThis.formParam.baseURL, cThis.url, cThis.yfuForm, function (data) {
                cThis.$emit('saveFormSuccess', data)
              })
            }
          }
        })
      }
    }
  }
</script>
